<template>
  <el-card>
    <div class="title"><h1>教师教材征订计划</h1></div>
    <div class="option">
      <el-button type="primary" style="margin-bottom: 20px" @click="handleAddPlan">添加征订计划</el-button>
    </div>

    <div class="list" style="margin-top: 20px">
      <span>教材征订列表：</span>
      <el-table :data="textbookData" border style="width: 100%">
        <el-table-column prop="textbookId" label="教材ID" width="180" />
        <el-table-column prop="name" label="教材名称" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="publisher" label="出版社" />
        <el-table-column prop="isbn" label="ISBN" width="200" />
        <el-table-column prop="edition" label="版本" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEditPlan(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDeletePlan(scope.row.textbookId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage, ElDialog } from 'element-plus';

// 模拟的教材征订数据
const textbookData = ref([
  {
    textbookId: '1',
    name: '高等数学',
    author: '张三',
    publisher: '高等教育出版社',
    isbn: '978-7-04-027763-9',
    edition: '1'
  },
  {
    textbookId: '2',
    name: '线性代数',
    author: '李四',
    publisher: '中南大学出版社',
    isbn: '978-7-5605-2256-7',
    edition: '2'
  },
  {
    textbookId: '3',
    name: '软件测试',
    author: '王五',
    publisher: '中南大学出版社',
    isbn: '978-7-5605-2256-8',
    edition: '3'
  }
  // 可以添加更多模拟教材征订数据
]);

const handleAddPlan = () => {
  console.log('添加教材征订计划');
  // 添加教材征订计划的逻辑
};

const handleEditPlan = (row) => {
  console.log('编辑教材征订计划:', row);
  // 编辑教材征订计划的逻辑
};

const handleDeletePlan = (textbookId) => {
  ElDialog.confirm('确定要删除这条教材征订计划吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    textbookData.value = textbookData.value.filter(item => item.textbookId !== textbookId);
    ElMessage.success("删除成功");
  }).catch(() => {
    ElMessage.info("已取消删除");
  });
};
</script>

<style scoped>
.title {
  font-size: 20px;
  margin-bottom: 10px;
}

.option {
  margin-bottom: 20px;
}
</style>